<template>
	<view class="robotBox">
		<up-sticky>
			<Header></Header>
		</up-sticky>
		<view class="boxOne">
			<view class="contenOne">
				#为每一次语音通话带来优质体验#
			</view>
			<view class="contenTwo">
				AI智能语音机器人
			</view>
			<view class="contenThree" @click="handleShowSignup">
				立即试用
			</view>
		</view>

		<view class="boxTwo">
			<view class="boxTwoText">
				传统人工销售痛点
			</view>
			<view class="boxTwoContent">
				<view class="Content-top">
					<view class="top-imgOne">
						<image src="../../static/robot/robotImg2.png" mode=""></image>
						<view class="imgOneText">
							情绪化
						</view>
					</view>
					<view class="top-imgOne">
						<image src="../../static/robot/robotImg3.png" mode=""></image>
						<view class="imgOneText">
							成本高
						</view>
					</view>
				</view>
				<view class="Content-bott">
					<view class="top-imgOne">
						<image src="../../static/robot/robotImg4.png" mode=""></image>
						<view class="imgOneText">
							管理难
						</view>
					</view>
					<view class="top-imgOne">
						<image src="../../static/robot/robotImg5.png" mode=""></image>
						<view class="imgOneText">
							效率低
						</view>
					</view>
					<view class="top-imgOne">
						<image src="../../static/robot/robotImg6.png" mode=""></image>
						<view class="imgOneText">
							转化低
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="boxThree">
			<view class="boxThree-text">
				智能语音电销机器人
			</view>
			<view class="boxThreeContent">
				<view class="boxThreeContent-img">
					<div class="boxXin"></div>
					<div class="surroundBox">
						<div class="surround surround1">银行金融</div>
						<div class="surround surround2">房产销售</div>
						<div class="surround surround3">产品推广</div>
						<div class="surround surround4">会议邀约</div>
						<div class="surround surround5">客户回访</div>
						<div class="surround surround6">政务办理</div>
					</div>
					<div class="buttonRightBox">
						<div class="buttonRighTex">
							呼大侠
						</div>
					</div>
				</view>

			</view>
		</view>

		<view class="boxFour">
			<view class="boxFourText">
				营销管理
			</view>
			<view class="boxFourContent">
				<view class="Content-item">
					<view class="item-img">
						<image src="../../static/robot/robotImg9.png" mode=""></image>
					</view>
					<view class="item-text">
						提供稳定优质线路资源
					</view>
				</view>
				<view class="Content-item">
					<view class="item-img">
						<image src="../../static/robot/robotImg10.png" mode=""></image>
					</view>
					<view class="item-text">
						高效率工作 低成本管理
					</view>
				</view>
				<view class="Content-item">
					<view class="item-img">
						<image src="../../static/robot/robotImg11.png" mode=""></image>
					</view>
					<view class="item-text">
						对话能力更加灵活可控
					</view>
				</view>
			</view>
		</view>

		<view class="boxFive">
			<view class="boxFiveContent-text">
				呼大侠VS人工外呼
			</view>
			<view class="boxFiveContent">
				<view class="ContentBox">
					<view class="ContentBox-left">
						<view class="left-box">
							<image src="../../static/robot/robotImg12.png" mode=""></image>
							<view class="imgText">
								呼大侠
							</view>
						</view>
						<view class="left-item">
							1000通/天/路
						</view>
						<view class="left-item">
							365天(全年无休)
						</view>
						<view class="left-item-box">
							<view class="box-text">
								机器人费用
							</view>
							<view class="box-text">
								无需额外支出
							</view>
						</view>
						<view class="left-item">
							服务稳定，情绪饱满
						</view>
						<view class="left-item">
							标准分类，跟进及时
						</view>
					</view>
					<view class="ContentBox-right">
						<view class="right-box">
							<view class="imgText">
								人工外呼
							</view>
							<image src="../../static/robot/robotImg13.png" mode=""></image>
						</view>
						<view class="right-item">
							200通/天/人
						</view>
						<view class="right-item">
							240天(除节假日)
						</view>
						<view class="right-item-box">
							<view class="box-text">
								易情绪化
							</view>
							<view class="box-text">
								服务质量波动大
							</view>
						</view>
						<view class="right-item">
							人力成本不断上涨
						</view>
						<view class="right-item">
							记录混乱，跟进难
						</view>
					</view>
					<view class="ContentBox-center">
						<view class="centerBox">
							<view class="center-item">

							</view>
							<view class="center-item">
								日拨打量
							</view>
							<view class="center-item">
								工作时间
							</view>
							<view class="center-item">
								成本核算
							</view>
							<view class="center-item">
								工作态度
							</view>
							<view class="center-item">
								客户跟进
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="boxSix">
			<view class="six-top">
				全面解决传统外呼难题
			</view>
			<view class="six-bott">
				<view class="bott-item">
					<view class="iconfont fa-kehuguanli-xuanzhong">

					</view>
					<view class="icon-text">
						用户画像分析
					</view>
				</view>
				<view class="bott-item">
					<view class="iconfont fa-daohang-yuyidingyi">

					</view>
					<view class="icon-text">
						话术自定义
					</view>
				</view>
				<view class="bott-item">
					<view class="iconfont fa-bodadianhua">

					</view>
					<view class="icon-text">
						多轮绘画
					</view>
				</view>
				<view class="bott-item">
					<view class="iconfont fa-jianting">

					</view>
					<view class="icon-text">
						智能应答
					</view>
				</view>
				<view class="bott-item">
					<view class="iconfont fa-diannao">

					</view>
					<view class="icon-text">
						意向推送
					</view>
				</view>
			</view>
		</view>

		<view class="sevenBox">
			<view class="sevenBox-title">
				功能优势
			</view>
			<view class="sevenBoxContent">
				<view class="Content-box">
					<view class="box-item item1">
						<view class="box-itemTitlt">
							智能语音交互功能
						</view>
						<view class="box-itemTxt">
							电话机器人通过前期简单设置之后，能够智能分析并针对不同的场景进行针对性的回答，不会受到情绪的影响，流畅的与客户进行沟通，提高成交率。
						</view>
					</view>
					<view class="box-item item2">
						<view class="box-itemTitlt">
							智能语义识别
						</view>
						<view class="box-itemTxt">
							语音识别灵敏迅速，客户的问题智能应对，精准判断客户意向，加速客户筛选，轻松完成指标
						</view>
					</view>
					<view class="box-item item3">
						<view class="box-itemTitlt">
							智能管理数据分析
						</view>
						<view class="box-itemTxt">
							后台自主录音，记录与客户的通话，通过通话记录，客户标签等数据形成可视化报表，为企业决策提供有效依据。
						</view>
					</view>
				</view>
			</view>
		</view>
		<Footer></Footer>

		<up-modal :show="showSignUp" @confirm="handleConfirm" title="立即试用" ref="uModal" @cancel="handleClose"
			showCancelButton cancelText="取消" confirmText="立即拨打">
			<view class="hello">
			    <view class="iconfont fa-bodadianhua"></view>
			    <view>电话联系:</view>
			    <view>13261388898</view>
			  </view>
		</up-modal>
	</view>
</template>

<script setup>
	import Header from '../compontents/header.vue'
	import Footer from '../compontents/footer.vue'
	import {
		ref
	} from 'vue'
	import api from '../../utils/request.js'
	const showSignUp = ref(false)
	const SignUpForm = ref({
		name: "",
		phone: ""
	})
	const signRefForm = ref(null)
	const rules = ref({
		name: [{
			type: 'string',
			required: true,
			message: '请输入姓名',
			trigger: ['blur', 'change']
		}],
		phone: [{
				type: 'string',
				required: true,
				message: '请输入手机号',
				trigger: ['blur', 'change']
			},
			{
				// 自定义验证函数，见上说明
				validator: (rule, value, callback) => {
					// 上面有说，返回true表示校验通过，返回false表示不通过
					// uni.$u.test.mobile()就是返回true或者false的
					if (!/^1[3456789]\d{9}$/.test(value)) {
						callback(new Error("手机号码有误，请重填"));
					} else {
						callback();
					}
					// return uni.$u.test.mobile(value);
				},
				message: '手机号码不正确',
				// 触发器可以同时用blur和change
				trigger: ['change', 'blur'],
			}
		]
	})
	const handleShowSignup = function() {
		showSignUp.value = true;
	}
	const handleClose = function() {
		showSignUp.value = false;
	}
	const handleConfirm = function() {
		uni.makePhoneCall({
		        phoneNumber: '13261388898', // 电话号码
		        success: function () {
		          console.log('拨打电话成功');
		        },
		        fail: function () {
		          console.log('拨打电话失败');
		        }
		      });
		// signRefForm.value.validate().then((valid) => {
		// 	if (valid) {
		// 		api.post('v1/home/addTryUser', SignUpForm.value).then((res) => {
		// 			if (res.code !== 0) {} else {
		// 				uni.showToast({
		// 					title: res.msg,
		// 					icon: 'success',
		// 					duration: 3000
		// 				})
		// 				showSignUp.value = false;
		// 			}
		// 		}).catch(err => {
		// 			uni.showToast({
		// 				title: err.msg,
		// 				icon: 'error',
		// 				duration: 3000
		// 			})
		// 		})
		// 		showSignUp.value = false;
		// 	}
		// })

	}
</script>

<style lang="scss" scoped>
	@import '@/static/icon/iconfont.css';

	:deep(.u-form-item__body__left__content__label) {
		font-size: 25rpx;
	}

	:deep(.uni-input-placeholder) {
		font-size: 24rpx;
	}

	:deep(.u-input__content__field-wrapper__field) {
		height: 0;
	}

	:deep(.u-modal__button-group__wrapper__text) {
		font-size: 28rpx;
	}

	:deep(.u-modal__title) {
		font-size: 28rpx;
	}
.hello {
	  width: 100%;
	  height: 60px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 10px;
	  font-size: 16px;
	  .fa-bodadianhua {
	    color: #006bec;
	  }
	}
	.robotBox {
		width: 100%;
		height: 100%;

		.boxOne {
			height: 420rpx;
			background-image: url('../../static/robot/robotImg1.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 60% center;
			padding-left: 21rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 40rpx;

			.contenOne {
				color: #fff;
				font-size: 20rpx;
				font-weight: 500;
			}

			.contenTwo {
				font-size: 45rpx;
				font-weight: 600;
				color: #fff;
			}

			.contenThree {
				width: 170rpx;
				height: 52rpx;
				border: 1rpx solid #eee;
				border-radius: 20rpx;
				line-height: 52rpx;
				text-align: center;
				color: #345ace;
				background-color: #fff;
				margin-left: 26rpx;
				font-size: 26rpx;
				font-weight: 550;
			}
		}

		.boxTwo {
			height: 494rpx;

			.boxTwoText {
				height: 139rpx;
				line-height: 139rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxTwoContent {
				height: calc(100% - 139rpx);
				display: flex;
				flex-direction: column;

				.Content-top {
					height: 50%;
					display: flex;
					justify-content: center;
					gap: 105rpx;

					.top-imgOne {
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 12rpx;
						width: 110rpx;
						height: 150rpx;

						image {
							width: 70rpx;
							height: 101rpx;
						}

						.imgOneText {
							color: #1455dd;
							font-size: 30rpx;
							font-weight: 600;
						}
					}
				}

				.Content-bott {
					flex: 1;
					display: flex;
					justify-content: space-evenly;

					.top-imgOne {
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 12rpx;
						width: 110rpx;
						height: 150rpx;

						image {
							width: 70rpx;
							height: 101rpx;
						}

						.imgOneText {
							color: #1455dd;
							font-size: 30rpx;
							font-weight: 600;
						}
					}
				}
			}
		}

		.boxThree {
			height: 621rpx;
			padding-top: 50rpx;

			.boxThree-text {
				height: 144rpx;
				line-height: 144rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxThreeContent {
				padding: 0 66rpx 0 98rpx;
				height: calc(100% - 144rpx);
				position: relative;


				.boxThreeContent-img {
					height: 100%;
					background-image: url('../../static/robot/robotImg7.png');
					background-repeat: no-repeat;
					background-size: cover;
					background-position: 50% 50%;
					position: relative;

					.buttonRightBox {
						position: absolute;
						right: 12rpx;
						bottom: 30rpx;
						width: 136rpx;
						height: 130rpx;
						border-radius: 17rpx;

						.buttonRighTex {
							font-size: 48rpx;
							font-weight: 600;
							color: #fff;
							text-align: center;
						}
					}

					.boxXin {
						position: absolute;
						top: 50%;
						left: 50%;
						color: #fff;
						transform: translate(-50%, -50%);
						// box-shadow: 0px 0px 15px #f3f3f3;
					}

					.surroundBox {
						position: absolute;
						top: 50%;
						left: 50%;

						.surround {
							position: absolute;
							top: 50%;
							left: 50%;
							width: 129rpx;
							height: 44rpx;
							line-height: 44rpx;
							border-radius: 17rpx;
							text-align: center;
							background-color: #4787fe;
							font-size: 22rpx;
							color: #fff;
							font-weight: 600;
						}

						.surround1 {
							transform: translateX(-24rpx) translateY(-147rpx);
						}

						.surround2 {
							transform: translateX(34rpx) translateY(-33rpx);
						}

						.surround3 {
							transform: translateX(-24rpx) translateY(70rpx);
						}

						.surround4 {
							transform: translateX(-284rpx) translateY(65rpx);
						}

						.surround5 {
							transform: translateX(-322rpx) translateY(-35rpx);
						}

						.surround6 {
							transform: translateX(-280rpx) translateY(-142rpx);
						}

					}
				}

			}
		}

		.boxFour {
			height: 377rpx;
			background-image: url('../../static/robot/robotImg8.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 60% center;
			padding: 0 52rpx 0 66rpx;

			.boxFourText {
				height: 80rpx;
				line-height: 80rpx;
				color: #1555dc;
				font-size: 37rpx;
				font-weight: 500;
				border-bottom: 1rpx dashed #ccc;
			}

			.boxFourContent {
				height: calc(100% - 80rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;

				.Content-item {
					display: flex;
					gap: 26rpx;
					margin-left: 21rpx;

					.item-img {
						width: 40rpx;
						height: 42rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item-text {
						font-size: 28rpx;
					}
				}
			}

		}

		.boxFive {
			height: 771rpx;

			.boxFiveContent-text {
				height: 183rpx;
				line-height: 183rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxFiveContent {
				height: calc(100% - 243rpx);
				padding-bottom: 60rpx;

				.ContentBox {
					height: 100%;
					padding: 0 28rpx;
					display: flex;
					gap: 32rpx;
					position: relative;

					.ContentBox-left {
						width: 50%;
						height: 100%;
						background-color: #3659ec;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						align-items: center;
						color: #fff;
						border-radius: 16rpx;
						font-size: 23rpx;
						font-weight: 530;

						.left-box {
							width: 195rpx;
							height: 62rpx;
							background-color: #fff;
							border-radius: 32rpx;
							display: flex;
							position: relative;

							image {
								width: 124rpx;
								height: 135rpx;
								position: absolute;
								left: -45rpx;
								bottom: 0;
							}

							.imgText {
								text-align: right;
								width: 100%;
								height: 62rpx;
								line-height: 62rpx;
								margin-right: 16rpx;
								color: #5287ff;
								font-size: 32rpx;
								font-weight: 650;
							}
						}

						.left-item-box {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
						}
					}

					.ContentBox-right {
						width: 50%;
						height: 100%;
						background-color: #f1f1f1;
						display: flex;
						flex-direction: column;
						border-radius: 16rpx;
						justify-content: space-evenly;
						align-items: center;
						color: #7c7c7c;
						font-size: 23rpx;
						font-weight: 530;

						.right-box {
							width: 195rpx;
							height: 62rpx;
							background-color: #fff;
							border-radius: 32rpx;
							display: flex;
							position: relative;

							image {
								width: 144rpx;
								height: 195rpx;
								position: absolute;
								right: -72rpx;
								bottom: -35rpx;
							}

							.imgText {
								text-align: left;
								width: 100%;
								height: 62rpx;
								line-height: 62rpx;
								margin-left: 16rpx;
								color: #5287ff;
								font-size: 32rpx;
								font-weight: 650;
							}
						}

						.right-item-box {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
						}

					}

					.ContentBox-center {
						position: absolute;
						left: 50%;
						top: 0;
						transform: translateX(-50%);
						width: 124rpx;
						height: 100%;

						.centerBox {
							width: 100%;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							align-items: center;

							.center-item {
								width: 100%;
								height: 60rpx;
								line-height: 60rpx;
								text-align: center;
								background-color: #132b71;
								color: #fff;
								border-radius: 16rpx;
								font-size: 23rpx;
								font-weight: 500;

								&:nth-child(1) {
									background-color: transparent;
								}
							}
						}
					}
				}
			}
		}

		.boxSix {
			height: 232rpx;
			background-color: #3659ec;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 20rpx;

			.six-top {
				color: #fff;
				font-size: 29rpx;
				font-weight: 500;
			}

			.six-bott {
				width: 100%;
				display: flex;
				justify-content: space-evenly;

				.bott-item {
					width: 99rpx;
					height: 99rpx;
					border-radius: 50%;
					border: 1rpx solid #fff;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 10rpx;

					.fa-diannao,
					.fa-jianting,
					.fa-bodadianhua,
					.fa-daohang-yuyidingyi,
					.fa-kehuguanli-xuanzhong {
						font-size: 36rpx;
						color: #fff;
					}

					.icon-text {
						font-size: 14rpx;
						color: #fff;
					}
				}
			}
		}

		.sevenBox {
			height: 1111rpx;
			padding: 0 45rpx;

			.sevenBox-title {
				height: 148rpx;
				line-height: 148rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.sevenBoxContent {
				height: calc(100% - 248rpx);
				padding-bottom: 104rpx;

				.Content-box {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 26rpx;

					.box-item {
						width: 100%;
						height: 33.3%;
						border-radius: 8rpx;
						box-shadow: 0 0 15rpx #eee;
						border: 1rpx solid #eee;
						display: flex;
						flex-direction: column;
						justify-content: center;
						padding: 0 26rpx;
						gap: 26rpx;

						.box-itemTitlt {
							font-size: 30rpx;
							color: #1455dd;
							font-weight: 600;
						}

						.box-itemTxt {
							font-size: 25rpx;
							color: #3d3d3d;
							line-height: 42rpx;
						}
					}

					.item1 {
						background-image: url('../../static/robot/robotImg14.png');
						background-repeat: no-repeat;
						background-size: 40%;
						background-position: 90% 80%;
					}

					.item2 {
						background-image: url('../../static/robot/robotImg15.png');
						background-repeat: no-repeat;
						background-size: 40%;
						background-position: 90% 80%;
					}

					.item3 {
						background-image: url('../../static/robot/robotImg16.png');
						background-repeat: no-repeat;
						background-size: 40%;
						background-position: 90% 80%;
					}
				}
			}
		}
	}
</style>